<div role="range" class="{{class}}">
    <label for="{{name}}">{{label}}</label>
    <input 
        name="{{name}}" 
        id="{{name}}" 
        {{if disabled}} disabled {{/if}}
        {{if readonly}} readonly {{/if}}
        {{if form}} form="{{form}}" {{/if}}
        {{if autofocus}} autofocus {{/if}}
        step="{{step}}"
        type="range" 
        min="{{min}}" 
        value="{{value}}"
        max="{{max}}"/>
    <label for="{{name}}" style="--percent:{{percent}};">
        <span {{if tip}}class="range-tip" data-value="{{value}}"{{/if}}></span>
    </label>
</div>